/* Chat Container - 主聊天容器，使用flex布局确保消息列表和输入区域垂直排列 */
.chat-container {
  display: flex;
  flex-direction: column;
  position: relative;
  /* 固定高度并启用flex布局 */
  /* 移动端适配（注释部分未启用） */
  /* @media (max-width: 768px) {
    height: calc(var(--vh, 1vh) * 100); /* 处理移动端vh问题 */
}



/* Message List - 消息列表区域，自动扩展并支持滚动 */
.message-list {
  /* 自动扩展区域 */
  position: relative;
  flex: 1 1 auto;
  /* 修复flex容器滚动问题 */
  //overflow-y: auto;
  padding: 0 0 30px 0;

  //contain: strict;
  //overscroll-behavior: contain; // 防止滚动穿透

}

/* Welcome Section - 初始欢迎界面，当没有消息时显示 */
.welcome-section {
  text-align: center;
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;

  // 头像样式
  .welcome-avatar {
    margin-bottom: 24px;

    .avatar-icon {
      font-size: 64px;
      color: var(--td-brand-color);
      background: rgba(0, 82, 217, 0.1);
      border-radius: 50%;
      padding: 12px;
    }
  }

  // 标题
  .welcome-title {
    font-size: 24px;
    color: var(--td-text-color-primary);
    margin: 20px 0 12px;
  }

  // 副标题
  .welcome-subtitle {
    color: var(--td-text-color-secondary);
    margin-bottom: 24px;
  }

  // 推荐问题 样式
  .suggestions-wrapper {
    margin-top: 20px;

    .suggestions-list {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .suggestion-btn {
      white-space: normal;
      height: auto;
      min-height: 40px;
      padding: 8px 16px;
      line-height: 1.4;
      text-align: left;
      transition: all 0.2s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }

  // tips
  .welcome-tips {
    list-style: none;
    padding: 0;

    li {
      padding: 8px;
      color: var(--td-text-color-placeholder);

      &::before {
        content: '·';
        margin-right: 8px;
        color: var(--td-brand-color);
      }
    }
  }
}

.message-container {
  min-height: 50vh;
}
/* Message Item - 单个消息项，区分用户和助手消息 */
.message-item {
  max-width: 1000px;
  margin: 20px auto;
  transition: opacity 0.3s ease;
  position: relative;


  /* 响应式调整 */
  @media (min-width: @screen-lg-max) {
    max-width: 1000px; // 大屏时 设置 1000px 为了与其他块垂直
  }

  @media (max-width: @screen-sm-max) {
    max-width: 100%;
  }

  &.user {
    .user-message {
      color: var(--td-text-color-anti);
      background: var(--td-brand-color);
      border-radius: 12px 12px 4px 12px;
      padding: 10px 15px 12px;
      box-shadow: 0 2px 8px rgba(0, 82, 217, 0.1);
      max-width: fit-content;
      margin-left: auto;

      @media (max-width: @screen-sm-max) {

      }
    }
  }

  &.assistant {
    .answer-message{
      display: flex;
      /* 使用 flex 布局 */
      align-items: flex-start; /* 改为垂直居中 */
      /* 头像和内容顶部对齐 */
      gap: 16px;
      /* 头像和内容之间的间距 */
      .answer-header {
        margin-bottom: 20px;
        .avatar {
          width: 40px;
          /* 头像大小 */
          height: 40px;
          //border-radius: 50%;
          /* 圆形头像 */
          flex-shrink: 0;
          /* 防止头像被压缩 */
          border: 1px solid var(--td-brand-color-hover)!important;
        }
        .avatar-sub {
          color: var(--td-text-color-placeholder)
        }
      }
      .avatar-think {
        border-radius: 12px !important;
        margin: 20px 0 !important;
        // 加载状态样式
        .think-loading {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px;
          color: var(--td-text-color-placeholder);
        }
      }
      .content {
        border: 1px solid var(--td-component-stroke);
        border-radius: 12px;
        padding: 16px;
        position: relative;
        background: var(--td-bg-color-container);

        &::before {
          content: '';
          position: absolute;
          left: -8px;
          top: 16px;
          border: 8px solid transparent;
          border-right-color: inherit;
        }
        @media (max-width: 768px) {
          padding: 12px;
          &::before {
            left: -6px;
            border-width: 6px;
          }
        }
      }

      // 智能展开逻辑
      .answer-message:not(:hover) .avatar-think {
        // 无内容时自动隐藏
        &:not(.has-content) {
          opacity: 0.6;
          .t-collapse-panel__header {
            padding: 4px 8px;
          }
        }
      }
      @media (max-width: @screen-sm-max) {
        gap: 12px;
        .avatar {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}

/* Content Safe Area - 内容通用样式 确保消息内容正确换行和显示 */
.user-message,
.answer-message .content {
  /* 文本自动换行 */
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: anywhere;

  /* 防止代码块溢出 */
  //pre {
  //  max-width: 100%;
  //  overflow-x: auto;
  //  background: var(--td-bg-color-component);
  //  padding: 12px;
  //  border-radius: 6px;
  //}
}

/* Input Area - 用户输入消息的区域 */
.input-area {
  //margin-top: auto;
  //background-attachment: local;
  position: sticky; // 固定在父容器底部
  z-index: 100; // 确保位于最上层
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 0 20px;
  bottom: 0;
  //background: var(--td-bg-color-page);
  background: var(--td-bg-color-container);

  @media (min-width: @screen-lg-max) {
    max-width: 100%;
  }

  /* 响应式调整 */
  @media (max-width: @screen-sm-max) {
    margin-top: 0;
    padding: 10px 0;
  }

  .input-type {
    max-width: 1000px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;

    .type-item {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding: 10px 20px;
      border-radius: 15px;
      margin-bottom: 10px;
      background-color: var(--td-bg-color-container);
      border: 1px solid var(--td-component-border);
      cursor: pointer;
      margin-right: 10px;

      img {
        height: 18px;
        margin-right: 8px;
      }

      &:hover {
        background-color: var(--td-bg-color-container);
      }
    }

    .input-type-active {
      border: 1px solid var(--td-brand-color-active);
    }

  }

  .input-area-container {
    //position: relative;  // 为绝对定位子元素建立参考系
    display: flex;       // 启用弹性布局
    flex-direction: column; // 纵向排列子元素
    width: 100%;
    bottom: 50px; // 没有定位上下文，可能无效，建议将其调整到.input-area上以实现粘性定位。
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); // 阴影效果提升层次感
    border: 1px solid var(--td-bg-color-container);
    border-radius: 12px; // 圆角效果
    padding: 12px; // 可以适当增大内边距以达到大模型输入框的效果
    box-sizing: border-box;
    background-color: var(--td-bg-color-container);
    max-width: 1000px;
    min-height: calc(2 * var(--td-comp-size-xxxxxl)); // 输入框最低高度
    //height: auto; // 允许高度自动扩展（根据内容）

    /* Uploaded File List - 已上传文件列表的样式 */
    .file-list {
      margin: 10px 0;

      // border: 1px solid #eee;
      // border-radius: 4px;
      // padding: 10px;
      .file-box {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;

        @media (max-width: @screen-sm-max) {
           scrollbar-width: none;
        }
      }

      .file-item {
        position: relative;
        display: flex;
        cursor: pointer;
        transition: background 0.2s;
        border-radius: 15px;
        border: 1px solid #d4d1d1;
        margin-right: 5px;
        flex-shrink: 0;

        &:hover {
          background: var(--td-brand-color-1);
        }

        .file-card {
          position: relative;
          display: flex;
          flex-wrap: nowrap;
          padding: 10px;
          margin-right: 5px;
          min-width: 240px;
        }

        .file-icon {
          margin-right: 12px;
          font-size: 24px;
          color: #1890ff;
        }

        .file-info {
          // flex: 1;
        }

        .file-name {
          font-weight: 500;
          margin-bottom: 4px;
          white-space: nowrap; /* 强制不换行 */
          overflow: hidden;     /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 显示省略号 */
          /* 可选：设置容器宽度 */
          width: 200px;
        }

        .file-actions {
          position: absolute;
          right: 0;
          top: 0;
        }

        //.file-actions {
        //  display: flex;
        //  opacity: .6;
        //  transition: opacity 0.2s;
        //  color: black;
        //  margin: 0 2px;
        //  &:hover {
        //    opacity: 1;
        //  }
        //}
      }
    }

    // 输入框
    .input-with-button {
      flex: 1; // 占据剩余空间
      display: flex;
      flex-direction: column;
      .input-box {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;



        .input-type-title {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          align-self: flex-start;
          background-color: var(--td-brand-color);
          //border: 1px solid var(--td-brand-color);
          //color: var(--td-brand-color);
          color: var(--td-text-color-anti);
          padding: 5px 10px 5px 6px;
          cursor: pointer;
          border-radius: 15px;

          .t-icon {
            font-weight: bold;
            font-size: 18px;
            //margin-right: 5px;
            color: var(--td-text-color-anti);
          }
        }
        .input-date {

        }
      }

      :deep(.t-textarea__inner) {
        border: none;
        outline: none;
        resize: none;

        &:focus,
        &:active {
          border: none !important;
          box-shadow: none !important;
        }
      }

      // 操作按钮容器
      .action-buttons {
        margin-top: auto; // 关键属性：自动上外边距推到底部
        //position: sticky; // 可选：滚动时保持可见
        //margin-top: 10px;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;

        // 附件
        .file-btn {
          margin-right: auto; // 靠左对齐
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }
        .file-box {
          flex: 1; // 占据剩余空间
          min-width: 0; // 防止内容溢出
        }
        // 发送按钮
        .send-btn,
        .stop-btn {
          margin-left: auto; // 靠右对齐
        }
      }

      // 移动端适配
      @media (max-width: @screen-sm-max) {
        //gap: 4px; // 缩小间隙
        flex-wrap: nowrap; // 禁止换行

        .action-buttons {
          //flex: 1; // 等分宽度
          .file-box {
            flex: 1 1 auto; // 强化弹性布局
          }
          .file-btn {
            .action-buttons-text {
              display: none !important;
            }
          }
          .send-btn,
          .stop-btn {
            order: 1;
          }
        }
      }
    }
  }
}



/* Animation for message appearance - 消息出现动画 */
@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-item {
  animation: messageAppear 0.3s ease-out;
}

/* Suggestions section - 建议按钮样式 */
.suggestions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 0 15px;

  .t-button {
    border-radius: 16px;
    color: #666;
    border-color: #ccc;

    &:hover {
      border-color: #409eff;
      color: #409eff;
    }
  }
}

/* Card content styling - 卡片内容样式 */
.card-content {
  padding: 12px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* Invalid card message - 无效卡片消息样式 */
.invalid-card {
  color: #777;
  font-size: 0.9em;
}

/* Knowledge alert styling - 知识库提醒样式 */
.knowledge-alert {
  margin: 10px 15px;
}

/* Loading overlay styling - 加载遮罩层样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 8px;
}

/* Error alert styling - 错误提醒样式 */
.error-alert {
  margin: 15px;
}
